<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">订单id</label>
        <el-input
          v-model="query.orderId"
          clearable
          placeholder="订单id"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">文件名称</label>
        <el-input
          v-model="query.fileName"
          clearable
          placeholder="文件名称"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">日期</label>
        <el-input
          v-model="query.dateTime"
          clearable
          placeholder="日期"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">客户</label>
        <el-input
          v-model="query.customer"
          clearable
          placeholder="客户"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">类别</label>
        <el-input
          v-model="query.types"
          clearable
          placeholder="类别"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">菲林</label>
        <el-input
          v-model="query.feilin"
          clearable
          placeholder="菲林"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">模具</label>
        <el-input
          v-model="query.model"
          clearable
          placeholder="模具"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="1300px"
        :fullscreen="true"
        @opened="opened()"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4" style="margin-bottom: 10px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>图片信息</span>
                </div>
                <div v-if="image.length > 0">
                  <el-carousel indicator-position="outside" style="margin-bottom: 15px">
                    <el-carousel-item v-for="(item, index) in image" :key="index">
                      <el-image
                        :src=" baseApi + '/file/' + item.userName + '/' + item.bId + '/' + item.fileUrl"
                        :preview-src-list="[baseApi + '/file/' + item.userName + '/' + item.bId + '/' + item.fileUrl]"
                        fit="contain"
                      >
                        <div slot="error">
                          <i class="el-icon-document" />
                        </div>
                      </el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div v-else>
                  <el-carousel indicator-position="outside" style="margin-bottom: 15px">
                    <el-carousel-item>
                      <el-image :src="waitUpload" title="无图片" class="avatar" />
                    </el-carousel-item>
                  </el-carousel>
                </div>

                <div style="text-align: center">
                  <el-button type="primary" icon="el-icon-upload" @click="uploadFileVisible = true">上传</el-button>
                  <el-popconfirm title="请确认是否要下载订单附件？" @confirm="downloadZip(form.orderId, form.fileName)">
                    <el-button slot="reference" type="warning" icon="el-icon-download" :loading="loading" :disabled="loading">下载</el-button>
                  </el-popconfirm>
                  <el-popconfirm title="你确定删除该订单上传的图片吗？" @confirm="deleteFile(form.orderId)">
                    <el-button slot="reference" type="danger" icon="el-icon-delete">删除</el-button>
                  </el-popconfirm>
                </div>

                <el-dialog title="上传资料" :visible.sync="uploadFileVisible" width="900px" :append-to-body="true">
                  <simpleUpload style="height: 450px" :bid="form.orderId" :ftype="ftype" @doneBlock="uploadSuccess" />
                </el-dialog>
              </el-card>
            </el-col>
            <el-col :xs="14" :sm="14" :md="14" :lg="12" :xl="16" style="margin-bottom: 10px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>个人信息</span>
                </div>
                <div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="订单名称" prop="fileName">
                        <el-input v-model="form.fileName" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="日期" prop="dateTime">
                        <el-date-picker v-model="form.dateTime" type="datetime" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="客户">
                        <el-input v-model="form.customer" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="菲林" prop="feilin">
                        <el-input v-model="form.feilin" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="模具" prop="model">
                        <el-input v-model="form.model" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="类别" prop="types">
                        <el-select v-model="form.types" filterable placeholder="请选择" style="width: 200px">
                          <el-option
                            v-for="item in dict.fz_types"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="针数" prop="needleNum">
                        <el-input v-model="form.needleNum" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="行数" prop="sampleRows">
                        <el-input v-model="form.sampleRows" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="单片时间" prop="singleChipTime">
                        <el-input v-model="form.singleChipTime" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单片重量" prop="weight">
                        <el-input v-model="form.weight" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-divider>后整</el-divider>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="烫机温度" prop="scaldTemp">
                        <el-input v-model="form.scaldTemp" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="烫机速度" prop="scaldSpeed">
                        <el-input v-model="form.scaldSpeed" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="烫机压力" prop="scaldPre">
                        <el-input v-model="form.scaldPre" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row style="display: none">
                    <el-col :span="24">
                      <el-form-item label="订单id" prop="orderId">
                        <el-input v-model="form.orderId" style="width: 200px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4" style="margin-bottom: 10px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>备注</span>
                </div>
                <div>
                  <el-input v-model="form.remark" type="textarea" :rows="19" />
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>订单工艺</span>
              </div>
              <div>
                <ortech ref="ortech" :sid="form.orderId" :permission="permission" />
              </div>
            </el-card>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderId" label="订单id" />
        <el-table-column prop="fileName" label="文件名称" />
        <el-table-column prop="dateTime" label="日期" />
        <el-table-column prop="customer" label="客户" />
        <el-table-column prop="types" label="类别">
          <template slot-scope="scope">
            {{ dict.label.fz_types[scope.row.types] }}
          </template>
        </el-table-column>
        <el-table-column prop="feilin" label="菲林" />
        <el-table-column prop="model" label="模具" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column
          v-if="checkPer(['admin','fzOrders:edit','fzOrders:del'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload'
import ortech from '@/views/ordertech/index'
import { getToken } from '@/utils/auth'
import simpleUpload from '@/components/SimpleUpload/index'
import waitUpload from '@/assets/images/waitupload.jpg'
import store from '@/store'
import crudFzOrders from '@/api/fzOrders'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'

const defaultForm = {
  orderId: null,
  fileName: null,
  dateTime: null,
  customer: null,
  types: null,
  feilin: null,
  model: null,
  remark: null,
  needleNum: null,
  sampleRows: null,
  singleChipTime: null,
  weight: null,
  scaldTemp: null,
  scaldSpeed: null,
  scaldPre: null,
  orderTechnologyId: null
}
export default {
  name: 'FzOrders',
  components: { pagination, crudOperation, rrOperation, udOperation, myUpload, ortech, simpleUpload },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['fz_types'],
  cruds() {
    return CRUD({
      title: '订单查询',
      url: 'api/fzOrders',
      idField: 'orderId',
      sort: 'orderId,desc',
      crudMethod: { ...crudFzOrders }
    })
  },
  data() {
    return {
      show: false,
      loading: false,
      ftype: 'order',
      waitUpload: waitUpload,
      image: [],
      uploadFileVisible: false,
      headers: {
        'Authorization': getToken()
      },
      permission: {
        add: ['admin', 'fzOrders:add'],
        edit: ['admin', 'fzOrders:edit'],
        del: ['admin', 'fzOrders:del']
      },
      rules: {
        orderId: [
          { required: true, message: '订单id不能为空', trigger: 'blur' }
        ],
        fileName: [
          { required: true, message: '文件名称不能为空', trigger: 'blur' }
        ],
        dateTime: [
          { required: true, message: '日期不能为空', trigger: 'blur' }
        ],
        types: [
          { required: true, message: '类别不能为空', trigger: 'blur' }
        ],
        feilin: [
          { required: true, message: '菲林不能为空', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '模具不能为空', trigger: 'blur' }
        ],
        needleNum: [
          { required: true, message: '针数不能为空', trigger: 'blur' },
          { type: 'number', message: '针数必须为数字值' }
        ],
        sampleRows: [
          { required: true, message: '行数不能为空', trigger: 'blur' },
          { type: 'number', message: '行数必须为数字值' }
        ],
        singleChipTime: [
          { required: true, message: '单片时间不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '单片重量不能为空', trigger: 'blur' },
          { type: 'number', message: '单片重量必须为数字值' }
        ],
        scaldTemp: [
          { required: true, message: '烫机温度不能为空', trigger: 'blur' },
          { type: 'number', message: '烫机温度必须为数字值' }
        ],
        scaldSpeed: [
          { required: true, message: '烫机速度不能为空', trigger: 'blur' },
          { type: 'number', message: '烫机速度必须为数字值' }
        ],
        scaldPre: [
          { required: true, message: '烫机压力不能为空', trigger: 'blur' },
          { type: 'number', message: '烫机压力必须为数字值' }
        ]
      },
      queryTypeOptions: [
        { key: 'orderId', display_name: '订单id' },
        { key: 'fileName', display_name: '文件名称' },
        { key: 'dateTime', display_name: '日期' },
        { key: 'customer', display_name: '客户' },
        { key: 'types', display_name: '类别' },
        { key: 'feilin', display_name: '菲林' },
        { key: 'model', display_name: '模具' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (this.$refs.ortech) {
        this.$refs.ortech.query.orderId = ''
      }
      return true
    },
    [CRUD.HOOK.beforeToAdd](crud, form) {
      if (!form.orderId) {
        form.orderId = this.guid()
      }
      return true
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.loadImage(form)
      return true
    },
    toggleShow() {
      this.show = !this.show
    },
    cropUploadSuccess() {
      store.dispatch('GetInfo').then(() => {
      })
    },
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    },
    guid() {
      return (this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4())
    },
    uploadFile() {
      this.uploadFileVisible = true
    },
    uploadSuccess(obj) {
      // this.uploadFileVisible = false
      this.form.fileName = obj.fileDir
      this.loadImage(this.form)
    },
    opened() {
      if (this.$refs.ortech) {
        this.$refs.ortech.query.orderId = this.form.orderId
        this.$refs.ortech.crud.toQuery()
      }
    },
    downloadZip(bid, zipName) {
      this.loading = true
      crudFzOrders.downloadZip(bid, zipName).then((res) => {
        const blob = new Blob([res])

        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, zipName + '.zip')
        } else {
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = zipName + '.zip'
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)
          this.loading = false
        }
      }
      )
    },
    deleteFile(bid) {
      crudFzOrders.deleteFile(bid).then((res) => {
        if (res.code == 200) {
          this.crud.notify(res.msg, CRUD.NOTIFICATION_TYPE.SUCCESS)
        } else {
          this.crud.notify(res.msg, CRUD.NOTIFICATION_TYPE.ERROR)
        }
        this.loadImage(this.form)
      })
    },
    loadImage(form) {
      crudFzOrders.getImage(form.orderId).then((res) => {
        if (res.code == 200) {
          const imglist = ['.bmp', '.dib', '.pcp', '.dif', '.wmf', '.gif', '.jpg', '.tif', '.eps', '.psd', '.cdr', '.iff', '.tga', '.pcd',
            '.mpt', '.png', '.jpeg']
          this.image = res.data.filter(function(item) {
            return imglist.some(function(suff) {
              return suff === item.fileType
            })
          })
        } else {
          this.crud.notify(res.msg, CRUD.NOTIFICATION_TYPE.ERROR)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-row .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}
</style>
